<template>
  <div class="rule-item">
    <!--数字及线条-->
    <div class="left-index">
      <!--逻辑文案-->
      <span class="logic">或</span>
      <!--数字-->
      <span class="num">{{(index || 0) + 1}}</span>
      <!--线条-->
      <div class="y-line" :class="{half: index === 0}"></div>
      <div class="x-line"></div>
    </div>
    <div class="conditions">
      <div class="cod-op">
        <div class="op-left">
          <el-button type="primary" size="small" @click="handleAddCondition(condition.labelMatchExpressions)">添加条件</el-button>
        </div>
        <el-button :icon="Delete" size="small" @click="handleDelExpress()"></el-button>
      </div>
      <BsTable ref="tableRef" :data="condition.labelMatchExpressions" :columns="columns" :show-page="false"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {Delete} from '@element-plus/icons-vue'
import BsTable from '@/components/table/BsTable.vue'
import {ref} from 'vue'

const tableRef = ref()
const emit = defineEmits(['del'])
const props = defineProps({
  condition: Object as any,
  index: Number
})

const columns:ColumnItem[] = [
  {
    label: '序号',
    prop: 'index',
    type: 'index',
    align: 'center'
  },
  {
    label: '条件',
    prop: 'key',
    bodyOptions: {
      type: 'select',
      bind: (_row, _index) => {
        return {}
      }
    }
  },
  {
    label: '逻辑关系',
    prop: 'operator',
    bodyOptions: {
      type: 'select',
      bind: (_row, _index) => {
        return {}
      }
    }
  },
  {
    label: '值',
    prop: 'value',
    bodyOptions: {
      type: 'input',
      bind: (_row, _index) => {
        return {}
      }
    }
  },
  {
    label: '操作',
    prop: 'action',
    bodyOptions: {
      type: 'button',
      bind: (_row, index) => {
        return {
          buttons: [{
            text: '删除',
            disabled: props.condition.labelMatchExpressions.length <= 1,
            onclick: () => {
              handleDelCondition(props.condition.labelMatchExpressions, index)
            }
          }]
        }
      }
    }
  }
]

/**
 * 设置内层条件项
 * @param parent
 */
const handleAddCondition = (parent:any[]) => {
  parent.push({
    key: '',
    operator: '',
    value: ''
  })
}

const handleDelCondition = (parent:any[], index:number) => {
  parent.splice(index, 1)
}

const handleDelExpress = () => {
  emit('del', props.index)
}
</script>
<style lang="scss" scoped>
.rule-item {
  display: flex;
  min-height: 60px;
  .left-index {
    width: 150px;
    position: relative;
    .num {
      display: block;
      border: solid 1px var(--primary-color);
      text-align: center;
      line-height: 30px;
      width: 30px;
      border-radius: 30px;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .logic {
      display: block;
      border: solid 1px var(--border-color);
      text-align: center;
      line-height: 30px;
      width: 30px;
      background-color: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 1;
    }
    .y-line {
      position: absolute;
      left: 15px;
      top: 0;
      width: 1px;
      bottom: 0;
      background-color: #ccc;
      &.half {
        top: 50%;
      }
      &.half-btm {
        bottom: 50%;
      }
    }
    .x-line {
      position: absolute;
      height: 1px;
      width: 130px;
      left: 20px;
      background-color: #ccc;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .add-content {
    display: flex;
    align-items: center;
  }
  .conditions {
    flex: 1;
    padding: 16px;
    border: solid 1px var(--border-color);
    margin-bottom: 16px;
    .cod-op {
      margin-bottom: 8px;
      display: flex;
      .op-left {
        flex: 1;
      }
    }
  }
}
</style>